<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡效果</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .渐变-enter-active, .渐变-leave-active {
            transition: opacity 0.5s ease;
        }
        .渐变-enter-from, .渐变-leave-to {
            opacity: 0;
        }
        .渐变-enter-to, .渐变-leave-from {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="应用"></div>
</body>
<script>
    const {createApp: 创建, ref: 引用} = Vue 

    const 根组件 = {
        template: /*html*/`
            <div>
                <button @click="切换">切换</button>
                <transition name="渐变">
                    <p v-if="显示">这个段落将会淡入淡出.</p>
                </transition>
            </div>
            <div :style="{border: '1px solid red'}">
                <button @click="添加条目">添加条目</button>
                <transition-group name="渐变">
                    <div v-for="条目 in 条目列表" :key="条目.编号" class="盒子">
                        {{条目.文本}}
                        <button @click="删除条目(条目)">删除</button>
                    </div>
                </transition-group>
            </div>
        `,
        setup() {
            const 显示 = 引用(false)

            const 切换 = () => {
                显示.value = !显示.value 
            }

            const 条目列表 = 引用([
                {编号: 1, 文本: '条目1'},
                {编号: 2, 文本: '条目2'},
                {编号: 3, 文本: '条目3'},
            ])

            const 下一个编号 = 引用(4)

            const 添加条目 = () => {
                条目列表.value.push({
                    编号: 下一个编号.value,
                    文本: `条目${下一个编号.value}`
                })
                下一个编号.value++
            }

            const 删除条目 = (条目) => {
                const 索引 = 条目列表.value.findIndex(元素 => 元素.编号 === 条目.编号)
                if (索引 != -1) {
                    条目列表.value.splice(索引, 1)
                }
            }

            return {
                显示,
                切换,
                条目列表,
                添加条目,
                删除条目,
            }
        }
    }

    const 应用 = 创建(根组件)
    应用.mount('#应用')
</script>
</html>
